<template>
  <div v-loading="loading">
    <div v-if="head" id="head">
      <div>
        <div>核验结果：{{ lock ? '已核验' : '未核验' }}
          <el-button type="primary" size="mini" @click="getData()">刷新</el-button>
        </div>
        <div>
          <el-button :disabled="price>balance" type="primary" size="mini" @click="getGather">
            邀请核验
            {{ computePrice }}
          </el-button>
        </div>
        <div>
          上次核验时间：{{ time ? time : '暂无' }}
        </div>
      </div>
      <p id="describe">{{ explain }}</p>
    </div>

    <div v-if="lock" style="margin: 0 6px">
      <el-card :body-style="{ padding: '0px' }" class="js">
        <div slot="header" class="he">
          <span>认证照片</span>
        </div>
        <div>
          <div id="p">
            <p>身份证人像照</p>
            <p>身份证国徽照</p>
            <p>人脸核身截图</p>
          </div>
          <div>
            <el-image v-if="qzSrc" class="img" :src="qzSrc" alt="身份证人像照" :preview-src-list="[qzSrc]"/>
            <el-image v-if="hzSrc" class="img" :src="hzSrc" alt="身份证国徽照" :preview-src-list="[hzSrc]"/>
            <el-image v-if="rzSrc" class="img" :src="rzSrc" alt="人脸核身截图" :preview-src-list="[rzSrc]"/>
          </div>
        </div>
      </el-card>

      <el-card :body-style="{ padding: '0px' }" class="js">
        <div slot="header" class="he">
          <span>认证结果</span>
        </div>
        <el-row>
          <el-col :span="12">
            <p style="text-align: center">证件核验:
              <template v-if="cardAuth.Sim">
                <el-tag v-if="cardAuth.Sim > 80" type="success" effect="dark">证件真实{{ cardAuth.Sim }}</el-tag>
                <el-tag v-else type="danger" effect="dark">不通过{{ cardAuth.Sim }}（拍摄不清，证件造假破损，过期...）</el-tag>
                <span style="color: red">{{ zjhc }}</span>
              </template>
              <span v-else class="hcjg">未核验</span>
            </p>
            <el-descriptions v-if="cardAuth.Result == 'Success'" :column="3" border size="mini">
              <el-descriptions-item label="证件身份证号">
                {{ cardAuth.IdNum }}
              </el-descriptions-item>
              <el-descriptions-item label="识别证件姓名">
                {{ cardAuth.Name }}
              </el-descriptions-item>
              <el-descriptions-item label="识别证件民族">
                {{ cardAuth.Nation }}
              </el-descriptions-item>
              <el-descriptions-item label="识别证件地址">
                {{ cardAuth.Address }}
              </el-descriptions-item>
              <el-descriptions-item label="识别出生年月">
                {{ cardAuth.Birth }}
              </el-descriptions-item>
              <el-descriptions-item label="识别证件性别">
                {{ cardAuth.Sex }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="12">
            <p style="text-align: center">人脸核验:
              <template v-if="biologyAuth.code">
                <el-tag v-if="biologyAuth.code == '0'" type="success" effect="dark">
                  通过/为本人{{ biologyAuth.result.similarity }}
                </el-tag>
                <el-tag v-else type="danger" effect="dark">不通过{{ biologyAuth.result.similarity }}（识别不清，非本人...）</el-tag>
              </template>
              <span v-else class="hcjg">未核验</span>
            </p>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
  import {baseInfo} from "@/api/system/query";
  import {getBalance} from "@/api/system/user";

  export default {
    name: "zjrl",
    props: {
      keyInfo: {
        required: true,
        type: Object
      },
      queryId: {
        required: true,
        type: String
      },
      price: {
        default: null,
        type: Number
      },
      priceType: {
        default: null,
        type: Boolean
      },
      explain: {
        default: null,
        type: String
      },
      head: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        loading: false,
        lock: false,
        msg: null,
        time: undefined,
        balance: undefined,
        qzSrc: undefined,
        hzSrc: undefined,
        rzSrc: undefined,
        cardAuth: {},
        biologyAuth: ''
      }
    },
    created() {
      this.refreshBalance()
      this.loading = true
      baseInfo(this.queryId).then(response => {
        this.disResponse(response)
      })
    },
    computed: {
      computePrice() {
        return this.price > this.balance ? '（余额不足）' : (this.zeroTwo(this.price) + (this.priceType ? '（默认价）' : '（定制价）'))
      },
      zjhc() {
        if (this.cardAuth.Name == this.keyInfo.name && this.cardAuth.IdNum == this.keyInfo.cardNo) {
          return ''
        } else {
          return '（与进件不一致）'
        }
      }
    },
    methods: {
      getGather() {
        if (this.price > this.balance) {
          this.$bus.$emit('openPay')
        } else {
          this.$emit('openShare', '1')
        }
      },
      refreshBalance() {
        getBalance().then(response => {
          this.balance = response.data
        })
      },
      getData() {
        this.loading = true
        baseInfo(this.queryId).then(response => {
          this.disResponse(response)
        })
      },
      disResponse(response) {
        if (response.data) {
          this.time = response.data.updateTime
          let data = response.data
          let baseSrc = location.origin + process.env.VUE_APP_BASE_API + '/system/query/getAuthImg?filePath='
          this.qzSrc = data.frontImg ? baseSrc + data.frontImg : null
          this.hzSrc = data.backImg ? baseSrc + data.backImg : null
          this.rzSrc = data.authImg ? baseSrc + data.authImg : null
          if (data.biologyAuth) {
            this.biologyAuth = JSON.parse(data.biologyAuth)
          }
          if (data.cardAuth) {
            this.cardAuth = JSON.parse(data.cardAuth)
          }
          this.lock = true
        }
        this.loading = false
      }
    }
  }
</script>

<style scoped>
  #head {
    width: 50vw;
    margin: 0px auto 8px;
  }

  #head div {
    display: flex;
    justify-content: space-around;
    align-items: center
  }

  #describe {
    margin: 5px 0 0;
    font-weight: bold;
    text-align: center;
  }

  #p {
    text-align: center;
  }

  #p p {
    width: 32%;
    display: inline-block;
    margin: 2px auto;
    font-size: 10px;

  }

  .hcjg {
    color: #3A71A8;
  }

  .img {
    height: 200px;
    width: 33%;
    margin-left: 2px;
  }

  .he {
    color: #3A71A8;
    font-size: 11px;
  }

  .js {
    margin: 4px 4px 0 0;
  }

  .el-descriptions__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 4px;
  }

  .el-descriptions {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    color: #8c93a1;
  }
</style>



